<!--
 * @Description:
 * @Author BPF
 * @create 2021/08/5 17:57
 -->
<template>
  <div :class="['page-title', `page-title--${type}`, dark && `page-title--${type}-dark`]">
    <slot>标题</slot>
  </div>
</template>

<script>
export default {
  name: 'GTitle',
  props: {
    type: {
      type: String,
      default: 'primary',
      validator: (val) => {
        return ['primary', 'warning', 'success', 'error'].includes(val)
      }
    },

    dark: {
      // 是否深色
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped lang="scss">
.page-title {
  color: #333;
  position: relative;
  padding: 6px 0 6px 12px;
  display: flex;
  align-items: center;
  font-size: 16px;
  min-height: 30px;
  box-sizing: border-box;
  //font-weight: bold;
  &:before {
    content: '';
    position: absolute;
    left: 0;
    height: calc(100% - 17px);
    border-radius: 4px;
    width: 4px;
    background: $--color-primary;
  }
  &.page-title--primary {
    &:before {
      background: $--color-primary;
    }
    &.page-title--primary-dark {
      background-color: rgba($--color-primary, 0.08);
      color: $--color-primary;
    }
  }
  &.page-title--success {
    &:before {
      background: $--color-success;
    }
    &.page-title--success-dark {
      background-color: rgba($--color-success, 0.08);
      color: $--color-success;
    }
  }
  &.page-title--warning {
    &:before {
      background: $--color-warning;
    }
    &.page-title--warning-dark {
      background-color: rgba($--color-warning, 0.08);
      color: $--color-warning;
    }
  }
  &.page-title--error {
    &:before {
      background: $--color-danger;
    }
    &.page-title--error-dark {
      background-color: rgba($--color-danger, 0.08);
      color: $--color-danger;
    }
  }
}
</style>
